<template>
	<view class="container">

		<!-- 标签栏 -->
		<view class="tab-bar">
			<view class="tab-item" :class="currentTab==item.name?'active':''" v-for="(item,index) in tabList"
				:key="index" @click="choseTab(item)">{{item.name}}</view>
		</view>

		<!-- 产品/订阅卡切换 -->
		<!-- <view class="switch-bar">
			<view class="switch-item active" :class="currentBar==item.name?'active':''" v-for="(item,index) in barList"
				:key="index" @click="choseBar(item)">{{item.name}}</view>
		</view> -->

		<!-- 订单详情 -->
		<view class="order-detail">
			<!-- 订单号 -->
			<view class="order-header">
				<text class="order-icon">📋</text>
				<text class="order-number">20250516102805592i</text>
				<text class="order-status">已领取</text>
			</view>

			<!-- 商品信息 -->
			<view class="product-info">
				<view class="product-image">
					<image src="/static/product-image.png" mode="aspectFill"></image>
					<view class="brand-logo">
						<text>ANGZHAI</text>
						<text class="brand-sub">风山</text>
					</view>
					<view class="product-tag">VC黄金百香果美容礼盒</view>
				</view>
				<view class="product-details">
					<view class="product-title">2025头茶果已经上线一纯甜无酸黄金百香果VC之王粉色轻奢礼盒</view>
					<view class="product-price">
						<text class="price">¥ 188.00</text>
						<text class="quantity">x1</text>
					</view>
				</view>
			</view>

			<!-- 底部信息 -->
			<view class="order-footer">
				<view class="order-info">
					<view class="info-item">
						<text class="label">已领取:</text>
						<text class="value">1/1份</text>
					</view>
					<view class="info-item">
						<text class="label">昵称:</text>
						<text class="value">那</text>
					</view>
				</view>
				<view class="action-buttons">
					<button class="btn btn-outline">领取记录</button>
					<button class="btn btn-primary">去付款</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				barList: [{
					name: "产品"
				}, {
					name: "订阅卡"
				}],
				tabList: [{
					name: "全部",
				}, {
					name: "待支付",
				}, {
					name: "待领取",
				}, {
					name: "已领取",
				}, {
					name: "已取消",
				}],
				currentTab: '全部',
				currentBar: "产品"
			}
		},
		methods: {
			choseBar(item) {
				this.currentBar = item.name
			},
			choseTab(item) {
				this.currentTab = item.name
			},
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.navbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 32rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #f0f0f0;

		.nav-left {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.iconfont {
				font-size: 36rpx;
				color: #333;
			}
		}

		.nav-title {
			font-size: 36rpx;
			font-weight: 600;
			color: #333;
		}

		.nav-right {
			display: flex;
			align-items: center;
			gap: 24rpx;

			.dots {
				font-size: 36rpx;
				color: #333;
			}

			.record-btn {
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
				border: 4rpx solid #333;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 24rpx;
					height: 24rpx;
					border-radius: 50%;
					border: 4rpx solid #333;
				}
			}
		}
	}

	.tab-bar {
		display: flex;
		background-color: #fff;
		padding: 0 32rpx;

		.tab-item {
			flex: 1;
			text-align: center;
			padding: 32rpx 0;
			font-size: 28rpx;
			color: #666;
			position: relative;

			&.active {
				color: #00bcd4;
				font-weight: 600;

				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 60rpx;
					height: 6rpx;
					background-color: #00bcd4;
					border-radius: 3rpx;
				}
			}
		}
	}

	.switch-bar {
		display: flex;
		background-color: #fff;
		margin: 20rpx 32rpx 0;
		border-radius: 12rpx;
		overflow: hidden;

		.switch-item {
			flex: 1;
			text-align: center;
			padding: 24rpx 0;
			font-size: 28rpx;
			color: #666;
			position: relative;

			&.active {
				color: #00bcd4;
				font-weight: 600;

				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					height: 6rpx;
					background-color: #00bcd4;
				}
			}
		}
	}

	.order-detail {
		margin: 24rpx 32rpx;
		background-color: #fff;
		border-radius: 24rpx;
		overflow: hidden;
	}

	.order-header {
		display: flex;
		align-items: center;
		padding: 32rpx;
		border-bottom: 1rpx solid #f0f0f0;

		.order-icon {
			font-size: 32rpx;
			margin-right: 16rpx;
		}

		.order-number {
			flex: 1;
			font-size: 28rpx;
			color: #333;
		}

		.order-status {
			font-size: 28rpx;
			color: #00bcd4;
			font-weight: 600;
		}
	}

	.product-info {
		display: flex;
		padding: 32rpx;

		.product-image {
			width: 200rpx;
			height: 200rpx;
			margin-right: 32rpx;
			position: relative;

			image {
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
				background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
			}

			.brand-logo {
				position: absolute;
				top: 16rpx;
				left: 16rpx;
				color: #fff;
				font-size: 24rpx;
				font-weight: bold;

				.brand-sub {
					font-size: 20rpx;
					opacity: 0.8;
				}
			}

			.product-tag {
				position: absolute;
				bottom: 16rpx;
				left: 16rpx;
				color: #fff;
				font-size: 20rpx;
				background: rgba(0, 0, 0, 0.3);
				padding: 8rpx 16rpx;
				border-radius: 8rpx;
			}
		}

		.product-details {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.product-title {
				font-size: 28rpx;
				color: #333;
				line-height: 1.4;
				margin-bottom: 16rpx;
			}

			.product-price {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.price {
					font-size: 32rpx;
					color: #333;
					font-weight: 600;
				}

				.quantity {
					font-size: 28rpx;
					color: #666;
				}
			}
		}
	}

	.order-footer {
		padding: 32rpx;
		border-top: 1rpx solid #f0f0f0;

		.order-info {
			display: flex;
			gap: 48rpx;
			margin-bottom: 32rpx;

			.info-item {
				display: flex;
				align-items: center;

				.label {
					font-size: 28rpx;
					color: #666;
					margin-right: 16rpx;
				}

				.value {
					font-size: 28rpx;
					color: #333;
				}
			}
		}

		.action-buttons {
			display: flex;
			gap: 24rpx;

			.btn {
				flex: 1;
				height: 80rpx;
				border-radius: 40rpx;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				&.btn-outline {
					background-color: #fff;
					color: #666;
					border: 2rpx solid #e0e0e0;
				}

				&.btn-primary {
					background-color: #00bcd4;
					color: #fff;
					border: none;
				}
			}
		}
	}

	/* 添加一个基本的返回箭头字体 */
	.iconfont::before {
		content: '<';
	}
</style>